<template>
  <div class="classroom">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="我的账户" name="1">
        <myaccount @goWithdraw="goWithdraw" @goBillDetail="goBillDetail" />
      </el-tab-pane>
      <el-tab-pane label="结算记录" name="2">
        <record />
      </el-tab-pane>
      <el-tab-pane label="提现管理" name="3">
        <withdraw />
      </el-tab-pane>
    </el-tabs>
    <!-- 账单汇总明细页面 -->
    <div v-if="activeName== 'bill'">
      <el-tabs v-model="billActive" type="border-card">
        <el-tab-pane label="账单汇总" name="first">
          <div class="bill-search">
            <div>
              <span>选择月份：</span>
              <el-date-picker v-model="collectMonth" type="month" placeholder="选择月" />
            </div>
            <div class="billScreen">
              <span :class="screen=='day'? 'active': ''" @click="getBillDay">日汇总</span>
              <span>|</span>
              <span :class="screen=='month'? 'active': ''" @click="getBillMonth">月汇总</span>
            </div>
          </div>
          <el-table
            :data="collectTableData"
            :header-cell-style="{background:'#fafbfc',color:'#606266'}"
            border
            style="width: 100%;"
          >
            <el-table-column prop="time" label="结算时间" align="center" />
            <el-table-column prop="income" label="收入（元）" align="center">
              <template slot-scope="scope">
                <div style="color:#2fce63;">+ {{ scope.row.income }}</div>
                <div>笔</div>
              </template>
            </el-table-column>
            <el-table-column prop="expend" label="支出（元）" align="center">
              <template slot-scope="scope">
                <div style="color:#fb6161;">+ {{ scope.row.expend }}</div>
                <div>笔</div>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="余额（元）" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="goBillInfo">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="账单明细" name="second">
          <div class="detail-search">
            <div class="detail-search-item">
              <span>订单号：</span>
              <el-input v-model="detailOrder" style="width:200px;" />
            </div>
            <div class="detail-search-item">
              <span>选择年月：</span>
              <el-date-picker v-model="detailMonth" type="month" placeholder="选择年月" />
            </div>
            <div class="detail-search-item" />
            <div class="detail-search-item">
              <span>类型：</span>
              <el-select v-model="detailType" placeholder="请选择类型">
                <el-option
                  v-for="item in detailTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </div>
          </div>
          <el-table
            :data="billTableData"
            :header-cell-style="{background:'#fafbfc',color:'#606266'}"
            border
            style="width: 100%"
          >
            <el-table-column prop="time" label="时间" align="center" />
            <el-table-column prop="type" label="类型" align="center" />
            <el-table-column prop="name" label="商品名称|商品类型" align="center" />
            <el-table-column prop="payWay" label="支付方式|订单号" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.payWay }}</div>
                <div>{{ scope.row.orderNum }}</div>
              </template>
            </el-table-column>
            <el-table-column label="入账/支出（元）" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.income">+ {{ scope.row.income }}</span>
                <span v-if="scope.row.expend">- {{ scope.row.expend }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="余额" align="center" />
            <el-table-column prop="payWay" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text">--</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 账单汇总详情页 -->
    <div v-if="activeName== 'billInfo'">
      <div class="billInfo-box">
        <div class="title-time">2019年08月03日汇总</div>
        <el-table
          :data="overviewTableData"
          :header-cell-style="{background:'#fafbfc',color:'#606266'}"
          style="width: 100%"
        >
          <el-table-column prop="priorBalance" label="上期余额(元)" align="left" />
          <el-table-column prop="currentIncome" label="本期收入(元)" align="center" />
          <el-table-column prop="currentExpend" label="本期支出(元)" align="center" />
          <el-table-column prop="currentBalance" label="本期余额(元)" align="right" />
        </el-table>

        <el-row :gutter="50" style="margin-top:40px;">
          <el-col :span="12">
            <div class="billInfo-hint">本期收入</div>
            <el-table
              :data="incomeTableData"
              :header-cell-style="{background:'#fafbfc',color:'#606266'}"
              style="width: 100%"
              class="incomeTable"
            >
              <el-table-column prop="dealType" label="交易类型" align="left" />
              <el-table-column prop="income" label="收入金额(元)" align="right">
                <template slot-scope="scope">
                  <div :class="scope.row.dealType=='合计收入'?'active':''">{{ scope.row.income }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <div class="billInfo-hint">本期支出</div>
            <el-table
              :data="expendTableData"
              :header-cell-style="{background:'#fafbfc',color:'#606266'}"
              style="width: 100%"
              class="expendTable"
            >
              <el-table-column prop="dealType" label="交易类型" align="left" />
              <el-table-column prop="expend" label="收入金额(元)" align="right">
                <template slot-scope="scope">
                  <div :class="scope.row.dealType=='合计支出'?'active':''">{{ scope.row.expend }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>

import myaccount from './assetmanage/myaccount'
import record from './assetmanage/record'
import withdraw from './assetmanage/withdraw'
export default {
  components: {
    myaccount,
    record,
    withdraw
  },
  data() {
    return {
      activeName: '1',
      billActive: 'first',
      // 账单汇总data
      collectMonth: '',
      screen: 'day',
      collectTableData: [
        {
          time: '2019-06-03',
          income: '99.00',
          expend: '65.00',
          balance: '300.00'
        }
      ],
      // 账单明细页data
      detailOrder: '',
      detailMonth: '',
      detailType: '',
      detailTypeOptions: [
        {
          value: '第一类型',
          label: '第一类型'
        }
      ],
      billTableData: [
        {
          time: '2019-03-06',
          type: '面授',
          name: '高中语文',
          payWay: '微信支付',
          orderNum: '023131131',
          income: '',
          expend: '95',
          balance: '300.00'
        }
      ],
      // 账单汇总详情页data
      overviewTableData: [
        {
          priorBalance: '88',
          currentIncome: '300',
          currentExpend: '200',
          currentBalance: '188'
        }
      ],
      incomeTableData: [
        {
          dealType: '订单入账',
          income: '10'
        },
        {
          dealType: '内容分销入账',
          income: '10'
        },
        {
          dealType: '充值',
          income: '10'
        },
        {
          dealType: '微信支付手续费返还',
          income: '10'
        },
        {
          dealType: '合计收入',
          income: '50'
        },
      ],
      expendTableData: [
        {
          dealType: '提现支出',
          expend: '10'
        },
        {
          dealType: '提现手续费支出',
          expend: '10'
        },
        {
          dealType: '内容分销支出',
          expend: '10'
        },
        {
          dealType: '订单退款',
          expend: '10'
        },
        {
          dealType: '微信支付手续费',
          expend: '10'
        },
        {
          dealType: '冲账',
          expend: '10'
        },
        {
          dealType: '合计支出',
          expend: '70'
        }
      ]
    }
  },
  methods: {
    tabClick(tab, event) {
      console.log(tab, event)
    },
    // 接收提现跳转请求
    goWithdraw() {
      this.activeName = '3'
    },
    goBillDetail() {
      this.activeName = 'bill'
    },
    // 跳转账单详情页面
    goBillInfo() {
      this.activeName = 'billInfo'
    },
    // 日账单筛选
    getBillDay() {
      this.screen = 'day'
      // 发请求
    },
    // 月账单筛选
    getBillMonth() {
      this.screen = 'month'
      // 发请求
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom {
  padding: 0px 20px;
  .bill-search {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    .billScreen {
      cursor: pointer;
      span.active {
        color: #2a75ed;
      }
    }
  }
  .detail-search {
    display: flex;
    margin: 20px 0;
    .detail-search-item {
      margin-right: 20px;
    }
  }
  .billInfo-box {
    padding: 10px 20px;
    .title-time {
      height: 50px;
      line-height: 50px;
      color: #666;
      margin-left: 8px;
    }
    .billInfo-hint {
      padding: 20px 0;
    }
    .incomeTable {
      .active {
        color: #2fce63;
      }
    }
    .expendTable {
      .active {
        color: #FB6161;
      }
    }
  }
}
</style>

